<template>
    <!-- 呼叫记录 -->
    <div class="common-call-record">
        <div v-if="recordList.length > 0">
            <b>电话呼叫记录：</b>
            <ul class="call-record-list">
                <li class="call-record-list" v-for="item in recordList" :key="item.id">
                    <p>{{ (item.agent_answer_at || item.customer_answer_at || '-') + "至" + (item.agent_hangup_at||'-') }}</p>
                    <p v-if="item.record_url != ''" :class="'weixinAudio_'+item.id" @click="playAudio(item.id, item.record_url)">
                        <audio :src="item.record_url" id="media" width="1" height="1" preload></audio>
                        <span id="audio_area" class="db audio_area">
                            <div class="audio_wrp db">
                                <span class="audio_play_area">
                                    <i class="icon_audio_default"></i>
                                    <i class="icon_audio_playing"></i>
                                </span>
                                <span id="audio_length" class="audio_length tips_global"></span>
                                <span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
                            </div>
                        </span>
                    </p>
                    <el-button v-if="item.record_url != ''" type="text" @click="handleDownload(item)" style="margin-left:20px;">下载</el-button>
                    <p v-else>暂无录音</p>
                </li>
            </ul>
        </div>
        <div v-else>
            {{ "暂无记录" }}
        </div>
    </div>
</template>
<script>
import '@/libs/weixinAudio'
import { getCallRecord } from '@/api/callCenter'
import { downloadAudio } from '@/utils/downloadUtil'

export default {
    name: 'CallRecord',
    props: ['obj'],
    data() {
        return {
            recordList: [],
            // audio集合
            audioList: {},
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        handleDownload(item){
            downloadAudio(item.record_url,item.id)
        },
        getList() {
            let that = this
            let parames = {
                queryType: 0,
                objType: that.obj.type,
                objBizId: that.obj.id
            }

            getCallRecord(parames).then(res => {
                if(res.status === 200) {
                    that.recordList = res.data
                    // that.recordList = [{
                    //     "occasion":"end",
                    //     "customer_ring_at":"2020-12-16 13:08:18",
                    //     "customer_hangup_at":"2020-12-16 13:08:52",
                    //     "agent_hangup_at":"2020-12-16 13:08:52",
                    //     "id":274,
                    //     "create_time":"2020-12-16 13:03:57",
                    //     "workflow":"out_direct",
                    //     "customer_phone":"18756938637",
                    //     "call_id":"bf0f1466-ab5c-4152-b440-688fb8c0fdf6",
                    //     "device_info":"ip座机",
                    //     "display_number":"051288979598",
                    //     "call_result":"客户未接",
                    //     record_url:"https://pro-ccrecords.kefutoutiao.com/linapp/cc_recordings/20201215170758_dbdb755d-5e74-4239-5aea-3daffbd19897_466e7b59-ba79-411e-bc20-e6507ae93cbe.mp3?OSSAccessKeyId=bPexlr6MCcadDhfu&Expires=1639559290&Signature=a8Do4ku3cILt%2BFOUoNEwkZZblz0%3D"
                    // }]
                }
            })
        },
        // 播放录音
        playAudio (id, audioUrl){
            let that = this
            // 停止其他的音频播放
            for(let key in that.audioList) {
                if(key != ('weixinAudio_'+id)) {
                    that.audioList[key].weixinAudio0.stop()
                }
            }
            if(!that.audioList['weixinAudio_'+id]) {
                if(audioUrl != null && audioUrl != '' && audioUrl != undefined){
                    that.audioList['weixinAudio_'+id] = $('.weixinAudio_'+id).weixinAudio({
                        autoplay: false,
                        src: audioUrl,
                    })
                }else{
                    that.$message({
                        type: 'warning',
                        message: '暂时没有录入语音！'
                    })
                }
            }
        },
    }
}
</script>
<style lang="scss">
.common-call-record {
    .call-record-list {
        li {
            display: flex;
            align-items: center;
            p {
                margin-left: 20px;
            }
        }
    }
}
</style>
